<script setup lang="ts">
const cardLoading = ref(false)

interface DataItem {
	title: string
}

const data: DataItem[] = [
	{
		title: '炎黄应当推出模型'
	},
	{
		title: '炎黄应当推出模型炎黄应当推出模型'
	},
	{
		title: '炎黄应当推出模型会发给大家'
	},
	{
		title: '炎黄应当推出模型更不符合开了个反馈回来官方'
	}
]
</script>

<template>
	<a-card :bordered="false" :loading="cardLoading">
		<h4>文本列表</h4>
		<a-divider/>
		<a-list item-layout="horizontal" :data-source="data">
			<template #renderItem="{ item }">
				<a-list-item>
					<a-list-item-meta>
						<template #title>
							<div class="flex items-center">
								<div>{{ item.title }}</div>
								<div class="px-2 bg-[#c6daf5] text-[#1677ff] rounded-[5px] ml-2">产品</div>
							</div>
						</template>
						<template #description>
							<div
								class="omit cursor-pointer"
								title="是我们前端开发中的一个常见需求，在项目开发中，我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。"
							>
								是我们前端开发中的一个常见需求，在项目开发中，在项在项目开发中目开发中在项目开发中在项目开发中我们可以使用element、ant等UI库实现。某些场景，为了一个简单的功能安装一个库是没必要的，我们最好的选择就是手搓。
							</div>
							<div class="flex items-center justify-between">
								<div>2024-21-9 16:99 公司动态</div>
								<div>王伟鹏</div>
							</div>
						</template>
					</a-list-item-meta>
				</a-list-item>
			</template>
		</a-list>
	</a-card>
</template>

<style scoped lang="less">
:deep(.ant-divider-horizontal) {
	margin-top: 10px;
}

.omit {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
